import React from 'react';
import Axios from 'axios';
import AlertModule from 'shared/AlertModule';
import Input from 'shared/input';
import { apiPrefix } from 'shared/api';

class SocialInsuranceForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      SocialInsurance: {},
      visible: false,
      change: false,
      error1: false,
      error2: false,
      error3: false,
      error4: false,
    };
  }
  componentDidMount() {
    if (this.props.match.params.id !== undefined) {
      const api = `${apiPrefix}wdy_wage/api/v1//wage/insurance?id=${this.props.match.params.id}`;
      Axios.get(api)
        .then((response) => {
          console.log(response);
          this.setState({ SocialInsurance: response.data.data });
        });
    }
  }
  handleOnchange=(value, key) => {
    const { SocialInsurance } = this.state;
    SocialInsurance[key] = value;
    this.setState({ SocialInsurance: { ...this.state.SocialInsurance }, change: true });
  }
  redirectToSocialInsurance() {
    this.props.history.push('/AttendanceAndWage/SocialInsurance');
  }
  showAlertModule=() => {
    if (this.state.change === true) {
      this.setState({ visible: true });
    } else {
      this.redirectToSocialInsurance();
    }
  }
  closeAlertModule=() => {
    this.setState({ visible: false });
  }
  historyPush=() => {
    this.redirectToSocialInsurance();
    this.setState({ visible: false });
  }
  sureAdd=() => {
    const { payStructure } = this.state;
    if (payStructure.name === '' || payStructure.name === undefined) {
      this.setState({ error1: true });
    } else {
      this.setState({ error1: false });
    }
    if (payStructure.subsidy_out === '' || payStructure.subsidy_out === undefined) {
      this.setState({ error2: true });
    } else {
      this.setState({ error2: false });
    }
    if (payStructure.job_salary === '' || payStructure.job_salary === undefined) {
      this.setState({ error3: true });
    } else {
      this.setState({ error3: false });
    }
    if (payStructure.bonus === '' || payStructure.bonus === undefined) {
      this.setState({ error4: true });
    } else {
      this.setState({ error4: false });
    }
    if (payStructure.subsidy === '' || payStructure.subsidy === undefined) {
      this.setState({ error5: true });
    } else {
      this.setState({ error5: false });
    }
    const { error1, error2, error3, error4, error5 } = this.state;
    if (!error1 && !error2 && !error3 && !error4 && !error5) {
      if (this.props.match.params.id !== undefined) {
        const api = `${apiPrefix}wdy_wage/api/v1/wage/salary?id=${this.props.match.params.id}`;
        Axios.put(api, payStructure)
          .then((response) => {
            if (response.status === 200) {
              console.log('ok');
              this.redirectToSocialInsurance();
            }
          });
      } else {
        const api = `${apiPrefix}wdy_wage/api/v1//wage/salary`;
        Axios.post(api, payStructure)
          .then((response) => {
            if (response.status === 200) {
              this.redirectToSocialInsurance();
            }
          });
      }
    }
  }
  render() {
    const { SocialInsurance } = this.state;
    return (
      <div className="content">
        <div>
          <h3>编辑社保基数</h3>
          <form>
            <div style={{ paddingLeft: 400 }}>
              <Input
                value={SocialInsurance.name || ''}
                label="社保基数档位"
                onChange={(val, key) => this.handleOnchange(val, key)}
                inputKey="name"
              />
              <Input
                value={SocialInsurance.pension || ''}
                label="养老保险"
                onChange={(val, key) => this.handleOnchange(val, key)}
                inputKey="pension"
                addonAfter="元"
              />
              <Input
                value={SocialInsurance.medical || ''}
                onChange={(val, key) => this.handleOnchange(val, key)}
                label="基本医疗保险"
                addonAfter="元"
                inputKey="medical"
              />
              <Input
                label="失业医疗保险"
                value={SocialInsurance.unem || ''}
                addonAfter="元"
                onChange={(val, key) => this.handleOnchange(val, key)}
                inputKey="unem"
              />
            </div>
            <div style={{ padding: '30px 0 30px 640px', }}>
              <button className="sure-button" onClick={this.sureAdd}>保存</button>
              <button className="canel-button" onClick={this.showAlertModule}>取消</button>
              <AlertModule visible={this.state.visible} onCancel={this.closeAlertModule} onOk={this.historyPush} />
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default SocialInsuranceForm;
